<template>
  <FormView not-form form-width="100%">
    <div style="padding-top: 200px; text-align: center">
      <div
        style="margin-bottom: 10px; font-weight: bold; font-size: 30px"
        :style="{ color: hasAccess2 ? 'green' : 'red' }">
        <p v-if="hasAccess2">有权限</p>
        <p v-else>无权限</p>
      </div>
      <div
        style="margin-bottom: 10px; font-weight: bold; font-size: 30px"
        :style="{ color: hasAccess('A_M_RW_CJRW') ? 'green' : 'red' }">
        <p v-if="hasAccess(['A_M_RW_CJRW'])">有权限</p>
        <p v-else>无权限</p>
      </div>
      <ElButton @click="addPrivilege">添加权限</ElButton>
      <ElButton @click="removePrivilege">移除权限</ElButton>
    </div>
  </FormView>
</template>

<script>
  import { hasAuthority } from '@/util/auth'
  import { mapMutations } from 'vuex'

  export default {
    name: 'PrivilegeDemo',
    computed: {
      hasAccess2() {
        // 使用 computed 可以提升性能
        return hasAuthority(['A_M_RW_CJRW'])
      }
    },
    methods: {
      hasAccess: hasAuthority,
      ...mapMutations('user', ['addAuthority', 'removeAuthority']),
      addPrivilege() {
        this.addAuthority('A_M_RW_CJRW')
      },
      removePrivilege() {
        this.removeAuthority('A_M_RW_CJRW')
      }
    }
  }
</script>
